﻿@{
	Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Basic Page Needs
	================================================== -->
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Font Awesome, the iconic font designed for Bootstrap">
	<meta name="author" content="Dave Gandy; modified for sample code by Daniel Porrey">

	<!--
		Full source code for this page can be found at https://fontawesome.codeplex.com/
	-->

	<title>Font Awesome Examples</title>

	<!-- CSS
	================================================== -->
	<link rel="stylesheet" href="http://fontawesome.io/assets/css/site.css">
	<link rel="stylesheet" href="http://fontawesome.io/assets/css/pygments.css">
	<link rel="stylesheet" href="/Content/font-awesome.min.css">
	<link rel="stylesheet" href="/Content/Custom.css">

	<!--[if lt IE 9]>
	  <script src="/Scripts/html5shiv.min.js"></script>
	  <script src="/Scripts/respond.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="jumbotron jumbotron-ad hidden-print">
		<div class="container">
			<h2>@Html.FontAwesome(FontAwesomeIconSet.Cloud)&nbsp; MVC5 Sample Page</h2>
			<p>This sample page was created in Visual Studio 2013 using MVC 5 and Bootstrap 3. The source code 
			for this page can be found at <strong>fontawesome.codeplex.com</strong></p>
		</div>
	</div>
	<div id="wrap">
		<div class="container">
			<section class="hidden-print">
				<div class="stripe-ad">
					<p class="lead">
						After you <a href="http://fontawesome.io/get-started/">get up and running</a>, you can place Font Awesome icons just about
						anywhere with the <code>&lt;i&gt;</code> tag.
						Some examples appreciatively re-used from the <a href="http://getbootstrap.com">Bootstrap documentation</a>.
					</p>
				</div>
			</section>

			<section id="inline">
				<h2 class="page-header">Inline Icons</h2>
				<div class="row">
					<div class="col-md-3 col-sm-4">
						<p>
							@FontAwesomeIconSet.CameraRetro.Html fa-camera-retro
						</p>
					</div>
					<div class="col-md-9 col-sm-8">
						<p>Place Font Awesome icons just about anywhere with the <code><span class="at">@@</span>Html.FontAwesome()</code> extension method.</p>
						<div class="highlight">
							<pre><code class="html"><span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.CameraRetro) fa-camera-retro</code></pre>
						</div>
						<div class="alert alert-success">@Html.FontAwesome(FontAwesomeIconSet.InfoCircle) Icon classes are echoed via CSS :before.</div>
					</div>
				</div>
			</section>

			<section id="larger">
				<h2 class="page-header">Larger Icons</h2>
				<div class="row">
					<div class="col-md-3 col-sm-4">
						<p>@Html.FontAwesome(FontAwesomeIconSet.CameraRetro.Large1x()) fa-camera-retro</p>
						<p>@Html.FontAwesome(FontAwesomeIconSet.CameraRetro.Large2x()) fa-camera-retro</p>
						<p>@Html.FontAwesome(FontAwesomeIconSet.CameraRetro.Large3x()) fa-camera-retro</p>
						<p>@Html.FontAwesome(FontAwesomeIconSet.CameraRetro.Large4x()) fa-camera-retro</p>
						<p>@Html.FontAwesome(FontAwesomeIconSet.CameraRetro.Large5x()) fa-camera-retro</p>
					</div>
					<div class="col-md-9 col-sm-8">
						<p>
							To increase icon sizes relative to their container, use the <code>.Large1x()</code> (33% increase), <code>.Large2x()</code>,
							<code>.Large3x()</code>, <code>.Large4x()</code>, or <code>.Large5x()</code> classes.
						</p>
						<div class="highlight">
							<pre><code class="html"><span class="nt">&lt;p&gt;<span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.CameraRetro.Large1x())</span></span> fa-camera-retro<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;<span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.CameraRetro.Large2x())</span> fa-camera-retro<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;<span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.CameraRetro.Large3x())</span> fa-camera-retro<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;<span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.CameraRetro.Large4x())</span> fa-camera-retro<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;<span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.CameraRetro.Large5x())</span> fa-camera-retro<span class="nt">&lt;/p&gt;</span>
</code></pre>
						</div>
						<div class="alert alert-success">
							@Html.FontAwesome(FontAwesomeIconSet.InfoCircle) If your icons are getting chopped off on top and bottom, make sure you have
							sufficient line-height.
						</div>
					</div>
				</div>
			</section>

			<section id="fixed-width">
				<h2 class="page-header">Fixed Width Icons</h2>
				<div class="row">
					<div class="col-md-3 col-sm-4">
						<ul class="nav nav-pills nav-stacked margin-bottom">
							<li class="active"><a href="#">@Html.FontAwesome(FontAwesomeIconSet.Home.FixedWidth())&nbsp; Home</a></li>
							<li><a href="#">@Html.FontAwesome(FontAwesomeIconSet.Book.FixedWidth())&nbsp; Library</a></li>
							<li><a href="#">@Html.FontAwesome(FontAwesomeIconSet.Pencil.FixedWidth())&nbsp; Applications</a></li>
							<li><a href="#">@Html.FontAwesome(FontAwesomeIconSet.Cogs.FixedWidth())&nbsp; Settings</a></li>
						</ul>
					</div>
					<div class="col-md-9 col-sm-8">
						<p>
							Use <code>.FixedWidth()</code> to set icons at a fixed width. Great to use when variable icon widths throw off alignment.
							Especially useful in things like nav lists.
						</p>
<div class="highlight">
<pre><code class="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;nav nav-pills nav-stacked&quot;</span><span class="nt">&gt;</span>
	<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;active&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;<span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Home.FixedWidth())</span> Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
	<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;<span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Book.FixedWidth())</span> Library<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
	<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;<span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Pencil.FixedWidth())</span> Applications<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
	<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;<span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Cogs.FixedWidth())</span> Settings<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</code></pre>
						</div>
					</div>
				</div>
			</section>

			<section id="list">
				<h2 class="page-header">List Icons</h2>
				<div class="row">
					<div class="col-md-3 col-sm-4">
						<ul class="@FontAwesomeStyles.UnorderedList">
							<li>@Html.FontAwesome(FontAwesomeIconSet.CheckSquare.ListItem())List icons (like these)</li>
							<li>@Html.FontAwesome(FontAwesomeIconSet.CheckSquare.ListItem())can be used</li>
							<li>@Html.FontAwesome(FontAwesomeIconSet.Spinner.Spin().ListItem())to easily replace</li>
							<li>@Html.FontAwesome(FontAwesomeIconSet.Square.ListItem())default bullets in lists</li>
						</ul>
					</div>
					<div class="col-md-9 col-sm-8">
						<p>Use <code><span class="at">@@</span><span class="na">FontAwesomeStyles</span>.UnorderedList</code> and <code>.ListItem()</code> to easily replace default bullets in unordered lists.</p>
						<div class="highlight">
<pre><code class="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;<span class="at">@@</span><span class="na">FontAwesomeStyles</span>.UnorderedList&quot;</span><span class="nt">&gt;</span>
	<span class="nt">&lt;li&gt;<span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.CheckSquare.ListItem())</span>List icons (like these)<span class="nt">&lt;/li&gt;</span>
	<span class="nt">&lt;li&gt;<span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.CheckSquare.ListItem())</span>can be used<span class="nt">&lt;/li&gt;</span>
	<span class="nt">&lt;li&gt;<span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Spinner.Spin().ListItem())</span>to replace<span class="nt">&lt;/li&gt;</span>
	<span class="nt">&lt;li&gt;<span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Square.ListItem())</span>default bullets in lists<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
</code></pre>
						</div>
					</div>
				</div>
			</section>

			<section id="bordered-pulled">
				<h2 class="page-header">Bordered & Pulled Icons</h2>
				<div class="row">
					<div class="col-md-3 col-sm-4">
						<p>
							@Html.FontAwesome(FontAwesomeIconSet.QuoteLeft.PullLeft().Border().Large2x())
							Use a few styles together and you'll have easy pull quotes or a great introductory article icon.
						</p>
					</div>
					<div class="col-md-9 col-sm-8">
						<p>
							Use <code>.Border()</code> and <code>.PullRight()</code> or <code>.PullLeft()</code> for easy pull quotes or
							article graphics.
						</p>
						<div class="highlight">
							<pre><code class="html"><span class="nt"><span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.QuoteLeft.PullLeft().Border().Large2x())</span>
Use a few styles together and you&#39;ll have easy pull quotes or a great introductory article icon.</code></pre>
						</div>
						<p>Notice how the styles can be chained.</p>
					</div>
				</div>
			</section>

			<section id="spinning">
				<h2 class="page-header">Spinning Icons</h2>
				<div class="row">
					<div class="col-md-3 col-sm-4">
						<p>
							<button class="btn btn-default btn-lg">@Html.FontAwesome(FontAwesomeIconSet.Spinner.Spin())</button>
							<button class="btn btn-default btn-lg">@Html.FontAwesome(FontAwesomeIconSet.Refresh.Spin())</button>
							<button class="btn btn-default btn-lg">@Html.FontAwesome(FontAwesomeIconSet.Cog.Spin())</button>
						</p>
					</div>
					<div class="col-md-9 col-sm-8">
						<p>
							Use the <code>.Spin()</code> class to get any icon to rotate. Works well with <code><span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.Spinner</code>,
							<code><span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.Refresh</code>, and <code><span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.Cog</code>.
						</p>
						<div class="highlight">
							<pre><code class="html"><span class="nt"><span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Spinner.Spin())</span>
<span class="nt"><span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Refresh.Spin())</span>
<span class="nt"><span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Cog.Spin())</span>
</code></pre>
						</div>
						<p class="alert alert-success">
							@Html.FontAwesome(FontAwesomeIconSet.InfoCircle) CSS3 animations aren't supported in IE8 - IE9.
						</p>
					</div>
				</div>
			</section>

			<section id="rotated-flipped">
				<h2 class="page-header">Rotated &amp; Flipped</h2>
				<div class="row">
					<div class="col-md-3 col-sm-4">
						<p style="font-size: 18px;">
							@Html.FontAwesome(FontAwesomeIconSet.Shield)&nbsp; normal<br>
							@Html.FontAwesome(FontAwesomeIconSet.Shield.Rotate90())&nbsp; fa-rotate-90<br>
							@Html.FontAwesome(FontAwesomeIconSet.Shield.Rotate180())&nbsp; fa-rotate-180<br>
							@Html.FontAwesome(FontAwesomeIconSet.Shield.Rotate270())&nbsp; fa-rotate-270<br>
							@Html.FontAwesome(FontAwesomeIconSet.Shield.FlipHorizontal())&nbsp; fa-flip-horizontal<br>
							@Html.FontAwesome(FontAwesomeIconSet.Shield.FlipVertical())&nbsp; fa-flip-vertical
						</p>
					</div>
					<div class="col-md-9 col-sm-8">
						<p>
							To arbitrarily rotate and flip icons, use the <code>.Rotate*()</code> and <code>.Flip*()</code> classes.
						</p>
						<div class="highlight">
							<pre><code class="html"><span class="nt"><span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Shield())</span><span class="ni">&amp;nbsp;</span> normal<span class="nt">&lt;br&gt;</span>
<span class="nt"><span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Shield().Rotate90())</span><span class="ni">&amp;nbsp;</span> fa-rotate-90<span class="nt">&lt;br&gt;</span>
<span class="nt"><span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Shield().Rotate180())</span><span class="ni">&amp;nbsp;</span> fa-rotate-180<span class="nt">&lt;br&gt;</span>
<span class="nt"><span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Shield().Rotate270())</span><span class="ni">&amp;nbsp;</span> fa-rotate-270<span class="nt">&lt;br&gt;</span>
<span class="nt"><span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Shield().FlipHorizontal())</span><span class="ni">&amp;nbsp;</span> fa-flip-horizontal<span class="nt">&lt;br&gt;</span>
<span class="nt"><span class="at">@@</span>Html.FontAwesome(<span class="na">FontAwesomeIconSet</span>.Shield().FlipVertical())</span><span class="ni">&amp;nbsp;</span> icon-flip-vertical
</code></pre>
						</div>
					</div>
				</div>
			</section>

			<section id="stacked">
				<h2 class="page-header">Stacked Icons</h2>
				<div class="row">
					<div class="col-md-3 col-sm-4">
						<div class="margin-bottom">
							@using (Html.BeginFontAwesomeStack(FontAwesomeStyles.Large1x))
							{
								@FontAwesomeIconSet.SquareO.Large2x().Stack2x().Html
								@FontAwesomeIconSet.Twitter.Stack1x().Html
							}
							fa-twitter on fa-square-o<br>
							@FontAwesomeStack.Create(FontAwesomeIconSet.Circle.Large2x(), FontAwesomeIconSet.Flag.Inverse()).Large1x().Html
							fa-flag on fa-circle<br>
							@FontAwesomeStack.Create(FontAwesomeIconSet.Square.Large2x(), FontAwesomeIconSet.Terminal.Inverse()).Large1x().Html
							fa-terminal on fa-square<br>
							@FontAwesomeStack.Create(FontAwesomeIconSet.Camera, FontAwesomeIconSet.Ban.Large2x().Customize("text-danger")).Large1x().Html
							fa-ban on fa-camera
						</div>
					</div>
					<div class="col-md-9 col-sm-8">
						<p>
							To stack multiple icons, use the <code>FontAwesomeStack</code> class on the parent, the <code>.Stack1x()</code>
							for the regularly sized icon, and <code>.Stack2x()</code> for the larger icon. <code>.Inverse()</code>
							can be used as an alternative icon color. You can even throw <a href="#larger">larger icon</a> classes on the parent
							to get further control of sizing.
						</p>
						<p>The first example shows this being done using a syntax similar to BeginForm. The remaining examples use the inline syntax.</p>
						<div class="highlight"><pre><code class="html"><span class="at">@@</span><span class="nt">using</span> (Html.BeginFontAwesomeStack(<span class="na">FontAwesomeStyles</span>.Large1x))
{
	<span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.SquareO.Large2x().Stack2x().Html
	<span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.Twitter.Stack1x().Html
}
fa-twitter on fa-square-o<span class="nt">&lt;br&gt;</span>

<span class="at">@@</span><span class="na">FontAwesomeStack</span>.Create(<span class="na">FontAwesomeIconSet</span>.Circle.Large2x(), <span class="na">FontAwesomeIconSet</span>.Flag.Inverse()).Large1x().Html
fa-flag on fa-circle<span class="nt">&lt;br&gt;</span>

<span class="at">@@</span><span class="na">FontAwesomeStack</span>.Create(<span class="na">FontAwesomeIconSet</span>.Square.Large2x(), <span class="na">FontAwesomeIconSet</span>.Terminal.Inverse()).Large1x().Html
fa-terminal on fa-square<span class="nt">&lt;br&gt;</span>

<span class="at">@@</span><span class="na">FontAwesomeStack</span>.Create(<span class="na">FontAwesomeIconSet</span>.Camera, <span class="na">FontAwesomeIconSet</span>.Ban.Large2x().Customize("text-danger")).Large1x().Html
fa-ban on fa-camera
</code></pre>
						</div>
					</div>
				</div>
			</section>

			<section id="bootstrap">
				<h2 class="page-header">Bootstrap 3 Examples</h2>
				<div class="row">
					<div class="col-md-3 col-sm-4">
						<p>
							<a class="btn btn-danger" href="#">
								@FontAwesomeIconSet.TrashO.Large1x().Html Delete
							</a>
							<a class="btn btn-default btn-sm" href="#">
								@FontAwesomeIconSet.Cog.Html Settings
							</a>
						</p>
						<p>
							<a class="btn btn-lg btn-success" href="#">
								@FontAwesomeIconSet.Flag.Large2x().PullLeft().Html Font Awesome<br>Version 4.1.0
							</a>
						</p>
						<div class="margin-bottom">
							<div class="btn-group">
								<a class="btn btn-default" href="#">@FontAwesomeIconSet.AlignLeft.Html</a>
								<a class="btn btn-default" href="#">@FontAwesomeIconSet.AlignCenter.Html</a>
								<a class="btn btn-default" href="#">@FontAwesomeIconSet.AlignRight.Html</a>
								<a class="btn btn-default" href="#">@FontAwesomeIconSet.AlignJustify.Html</a>
							</div>
						</div>
						<div class="margin-bottom">
							<div class="input-group margin-bottom-sm">
								<span class="input-group-addon">@Html.FontAwesome(FontAwesomeIconSet.EnvelopeO.FixedWidth())</span>
								<input class="form-control" type="text" placeholder="Email address">
							</div>
							<div class="input-group">
								<span class="input-group-addon">@Html.FontAwesome(FontAwesomeIconSet.Key.FixedWidth())</span>
								<input class="form-control" type="password" placeholder="Password">
							</div>
						</div>
						<div class="margin-bottom">
							<div class="btn-group open">
								<a class="btn btn-primary" href="#">@Html.FontAwesome(FontAwesomeIconSet.User.FixedWidth()) User</a>
								<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
									<span class="fa fa-caret-down"></span>
								</a>
								<ul class="dropdown-menu">
									<li><a href="#">@Html.FontAwesome(FontAwesomeIconSet.Pencil.FixedWidth()) Edit</a></li>
									<li><a href="#">@Html.FontAwesome(FontAwesomeIconSet.TrashO.FixedWidth()) Delete</a></li>
									<li><a href="#">@Html.FontAwesome(FontAwesomeIconSet.Ban.FixedWidth()) Ban</a></li>
									<li class="divider"></li>
									@{
										// ***
										// *** Create an empty icon
										// ***
										FontAwesomeIcon icon = new FontAwesomeIcon();

										// ***
										// *** Add the class
										// ***
										icon.AddClassAttribute("i");
									}
									<li><a href="#">@icon.Html Make admin</a></li>
								</ul>
							</div>
						</div>

					</div>
					<div class="col-md-9 col-sm-8">
						<p>
							Font Awesome works great with the full range of Bootstrap components.
						</p>
						<div class="highlight">
<pre><code class="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-danger&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
	<span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.TrashO.Large1x().Html Delete<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default btn-sm&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
	<span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.Cog.Large1x().Html Settings<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-lg btn-success&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
	<span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.Flag.Large2x().PullLeft().Html Font Awesome<span class="nt">&lt;br&gt;</span>Version 4.1.0<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;btn-group&quot;</span><span class="nt">&gt;</span>
	<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span><span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.AlignLeft.Html<span class="nt">&lt;/a&gt</span>
	<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span><span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.AlignCenter.Html<span class="nt">&lt;/a&gt;</span>
	<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span><span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.AlignRight.Html<span class="nt">&lt;/a&gt;</span>
	<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span><span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.AlignJustify.Html<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;input-group margin-bottom-sm&quot;</span><span class="nt">&gt;</span>
	<span class="nt">&lt;span</span><span class="na">class=</span><span class="s">&quot;input-group-addon&quot;</span><span class="nt">&gt;</span><span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.EnvelopeO.FixedWidth()<span class="nt">&lt;/span&gt;</span>
	<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Email address&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;input-group&quot;</span><span class="nt">&gt;</span>
	<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;input-group-addon&quot;</span><span class="nt">&gt;</span><span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.Key.FixedWidth()<span class="na">&lt;/span&gt;</span>
	<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">type=</span><span class="s">&quot;password&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Password&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;btn-group open&quot;</span><span class="nt">&gt;</span>
	<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span><span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.User.FixedWidth() User<span class="nt">&lt;/a&gt;</span>
	<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary dropdown-toggle&quot;</span> <span class="na">data-toggle=</span><span class="s">&quot;dropdown&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
	<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;fa fa-caret-down&quot;</span><span class="nt">&gt;&lt;/span&gt;&lt;/a&gt;</span>
	<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;dropdown-menu&quot;</span><span class="nt">&gt;</span>
		<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span><span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.Pencil.FixedWidth() Edit<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
		<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span><span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.Trash.FixedWidth() Delete<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
		<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span><span class="at">@@</span><span class="na">FontAwesomeIconSet</span>.Ban.FixedWidth() Ban<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
		<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;divider&quot;</span><span class="nt">&gt;&lt;/li&gt;</span>
		<span class="at">@@</span>{
			<span class="comment">// ***
			// *** Create an empty icon
			// ***</span>
			<span class="na">FontAwesomeIcon</span> icon = new <span class="na">FontAwesomeIcon</span>();

			<span class="comment">// ***
			// *** Add the class
			// ***</span>
			icon.AddClassAttribute(<span class="s">"i"</span>);
		}
	<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span><span class="at">@@</span>icon.Html Make admin<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre>
						</div>
					</div>
				</div>
			</section>
		</div>
	</div>

	<script src="/Scripts/jquery-2.1.1.min.js"></script>
	<script src="/Scripts/bootstrap.min.js"></script>
</body>
</html>


